<template>
	<view class="flex-column" style="width: calc(100vw - 32px); margin-left: 16px; margin-top: 15px;">
		<publish-item title="所属行业" :value="$tools.empty(industry.name)" placeholder="请选择" touchDisabled
			@touchTap="openPicker('industry')"></publish-item>
		<publish-item title="任务类别" :value="$tools.empty(classes.name)" placeholder="请选择" touchDisabled
			@touchTap="openPicker('classes')"></publish-item>
		<publish-item title="任务名称" :value="taskName" requisite @inputEnd="(e) => {taskName = e}"></publish-item>
		<publish-item title="任务内容" :value="taskContent" requisite touchDisabled
			@touchTap="intoTaskContent"></publish-item>
		<view class="flex-row flex-items-center font-14 font-weight-regular" style="height: 54px; color: #313C56;">
			添加图片
		</view>
		<uv-upload :fileList="imgList" :maxCount="10" width="80" height="80" @afterRead='choosedImages'
			@delete="deleteImages">
			<view class="flex-row-center"
				style="background-color: white; width: 80px; height: 80px; border: 1px solid #EFF0F4;">
				<image src="../../../static/add.png" style="width: 28px;height: 28px;"></image>
			</view>
		</uv-upload>
		<view style="width: calc(100%); height: 1px; background-color: #F7F9FD; margin-top: 15px;">
		</view>
		<view class="flex-row flex-items-center font-14 font-weight-regular" style="height: 54px; color: #313C56;">
			上传附件
		</view>
		<view class="flex-row flex-items-center font-12 font-weight-regular" style="margin-top: -15px; color: #95A4B3">
			部分钱包暂时不支持文件上传!
		</view>
		<upload-file :fileList="fileList" @choosedFile="choosedFile" @delete="deleteFile"></upload-file>
		<view style="width: calc(100%); height: 1px; background-color: #F7F9FD; margin-top: 15px;">
		</view>

	</view>
</template>

<script>
	import publishItem from "@/components/publish-item/publish-item.vue"
	import uploadFile from "@/components/upload-file/upload-file.vue"
	import cookie from '@/util/cookie.js'
	export default {
		name: "task-info",
		emits: ['openPicker'],
		components: {
			publishItem,
			uploadFile
		},
		props: {
			industry: {
				type: Object,
				default: () => ({})
			},
			classes: {
				type: Object,
				default: () => ({})
			},
		},
		data() {
			return {
				taskName: '',
				taskContent: '',
				imgList: [],
				fileList: []

			};
		},
		methods: {
			/**
			 * 获取发布任务信息参数
			 */
			getParams() {
				const imgs = []
				for (let i = 0; i < this.imgList.length; i++) {
					imgs.push(this.imgList[i].url)
				}

				const params = {
					fid: this.industry.id,
					sid: this.classes.id,
					name: this.taskName,
					detail: this.taskContent,
					picsUrl: imgs.join(','),
					file: JSON.stringify(this.fileList)
				}
				// const params = {
				// 	fid: 1,
				// 	sid: 5,
				// 	name: 'namekkk',
				// 	detail: 'detailxxxxxx',
				// 	picsUrl: 'https://zhonghui-vip.oss-cn-chengdu.aliyuncs.com/1706968437393_257886.pic,https://zhonghui-vip.oss-cn-chengdu.aliyuncs.com/1706968437393_257886.pic',
				// 	file: '[{"fileName":"800672063598743552(1).pdf","fileUrl":"https://zhonghui-vip.oss-cn-chengdu.aliyuncs.com/1706968444575_314360.pdf","size":"1.0 M"}]'
				// }
				return params
			},
			/**
			 * 进入任务内容
			 */
			intoTaskContent() {
				uni.navigateTo({
					url: `/pages/describe-edit/describe-edit?title=任务内容&value=${this.taskContent}`,
					events: {
						describeEdit: (data) => {
							console.log(data)
							this.taskContent = data
						}
					}
				})
			},
			/**
			 * 删除图片
			 */
			deleteImages(event) {
				this.imgList.splice(event.index, 1)
			},
			/**
			 * 选择图片
			 */
			async choosedImages(event) {
				uni.showLoading({
					title: '正在上传...',
					mask:true
					
				})
				const a = await this.upload(event.file.url)
				setTimeout(function() {
					uni.hideLoading()
				}, 50)
				this.imgList.push({
					url: a
				})

			},
			/**
			 * 打开picker
			 */
			openPicker(key) {
				this.$emit('openPicker', key)
			},
			/**
			 *  删除文件
			 */
			deleteFile(e) {
				this.fileList.splice(e.index, 1)
			},
			/**
			 * 选择文件
			 */
			async choosedFile(file) {
				uni.showLoading({
					title: '正在上传...',
					mask:true
					
				})
				const fileUrl = await this.upload(file.fileUrl)
				setTimeout(function() {
					uni.hideLoading()
				}, 50)
				
				file.fileUrl = fileUrl
				this.fileList.push(file)
			},
			/**
			 * 上传文件
			 */
			upload(url) {
				return new Promise((resolve, reject) => {
					uni.$uv.http.upload('api/front/upload', {
						filePath: url,
						name: 'file',
						validateStatus: (statusCode) => {
							return statusCode == 200
						}
					}).then(res => {
						// 返回的res.data 已经进行JSON.parse
						console.log(res)
						resolve(res)
					}).catch(err => {
						console.log(err)
						reject(err)
					})
				})
			},
		}
	}
</script>

<style>

</style>